<template>
  <!--搜索框-->
  <!--充值管理 【手机号搜索此用户 进行充值】-->
  <!--用户列表【删除】-->
  <div class="user-manage">
    <strong style="display: inline-block; margin: 0 0 10px;">用户管理</strong>
    <!-- <div class="search">
      <el-input size="mini" placeholder="请输入搜索内容" style="width:200px"></el-input>

      <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
    </div> -->
    <div class="bike-list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="username" label="性别">
          <template slot-scope="scope">
            <el-button
              size="mini"
            >{{scope.row.gender === 1 ? '男' : '女' }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="integral" label="剩余积分">
          <template slot-scope="scope">
              <div style="color:red" v-show="scope.row.integral < 0">{{scope.row.integral}}</div>
              <div v-show="scope.row.integral >= 0">{{scope.row.integral}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="integral" label="选择充值" width="300px">
          <template slot-scope="scope">
            <el-input-number
              v-model="chargeNums"
              v-show="scope.$index === ChargeIndex"
              :controls="false"
              size="small"
              @change="handleChange"
            ></el-input-number>
            <el-button
              style="margin-left: 7px"
              type="success"
              v-show="scope.$index === ChargeIndex"
              @click="sureCharge(scope.row)"
              size="mini"
            >确认充值</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="action" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="recharge(scope.$index)"
            >充值</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="delUser(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAllUsers, addRecharge, delUser } from "../../../api";
import config from "./../../../config/index";

export default {
  name: "userManage",
  data() {
    return {
      tableData: [],
      ChargeIndex: "",
      num: 0,
      chargeNums: 0,
      userId: "",
      adminId: ""
    };
  },
  components: {},
  mounted() {
    let adminUserInfo = JSON.parse(config.getCache("adminUserInfo"));
    this.adminId = adminUserInfo.id;
    this.initUserList();
  },
  methods: {
    initUserList() {
      getAllUsers().then(res => {
        if (res.code === 200) {
          this.tableData = res.result.userList;
        }
      });
    },
    delUser(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delUser({ userId: id }).then(res => {
            if (res.code === 200) {
              this.initUserList();
              this.$message({
                message: res.data,
                type: "success"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    recharge(index) {
      this.ChargeIndex = index;
    },
    sureCharge(data) {
      if (this.chargeNums <= 0) {
        this.$message({
          message: "请输入合法值",
          type: "warning"
        });
        return;
      }
      addRecharge({
        userId: data.id,
        adminId: this.adminId,
        money: this.chargeNums
      }).then(res => {
        if (res.code === 200) {
          this.initUserList();
          this.$message({
            message: res.data,
            type: "success"
          });
        }
      });
    },
    handleChange(value) {
      // eslint-disable-next-line no-console
      console.log(value);
      this.chargeNums = value;
      // this.num = value
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.search {
  margin: 0 0 30px;
}

.el-input {
  margin-right: 10px;
}
</style>
